<template>
	<view class="errand">
		<view class="title dis">
			<view class="titL">
				<view class="titLT">校园跑腿</view>
				<view class="titLL dis">
					<view class="titItem">校园跑腿</view>
					<view class="titItem">副业兼职</view>
					<view class="titItem">安全无忧</view>
				</view>
			</view>
			<view class="titR dis">
				<image class="titImg" src="/static/run.png" mode=""></image>
			</view>
		</view>
		<view class="errandCon">
			<view class="tab dis">
				<view class="tabItem" :class="tabId == 0 ? 'avtive' : ''" @click="changeTab(0)">
					<view class="tabName">全部订单</view>
				</view>
				<view class="tabItem" :class="tabId == 1 ? 'avtive' : ''" @click="changeTab(1)">
					<view class="tabName">未被接单</view>
				</view>
				<view class="tabItem" :class="tabId == 2 ? 'avtive' : ''" @click="changeTab(2)">
					<view class="tabName">我发布的</view>
				</view>
				<view class="tabItem" :class="tabId == 3 ? 'avtive' : ''" @click="changeTab(3)">
					<view class="tabName">我帮助的</view>
				</view>
			</view>
			<view class="list p30" v-if="list.length > 0">
				<view class="item card" @click="goDetails(item)" v-for="item in list" :key="item.id">
					<view class="itemTop dis p20">
						<view class="topL dis">
							<view class="tab0" :class="item.class1">{{ item.helpTypeContent }}</view>
							<view class="money">￥{{ item.recipientCommission }}</view>
						</view>
						<view class="topR">
							<view class="state" :class="item.class2">{{ item.orderStatusContent }}</view>
						</view>
					</view>
					<view class="itemCon p20">
						<view class="itemTIT">{{ item.orderContent }}</view>
						<view class="conI dis">
							<view class="lable">待帮助人：</view>
							<view class="value dis">
								<view class="userImg">
									<image :src="item.senderAvatar" mode="aspectFill"></image>
								</view>
								<view class="name">{{ item.senderNickname }}</view>
							</view>
						</view>
						<view class="conI dis" v-if="item.mutualTime">
							<view class="lable">互助时间：</view>
							<view class="value">{{ item.mutualTime }}</view>
						</view>
						<view class="conI dis">
							<view class="lable">下单时间：</view>
							<view class="value">{{ item.createTime }}</view>
						</view>
					</view>
					<view class="bottomBut" @click.stop="open(item.id)" v-if="item.orderStatus == 0 && item.isSender == 0">抢单￥{{ item.recipientCommission }}</view>
				</view>
				<view class="noData">没有更多了</view>
			</view>
			<view class="noData" v-else>暂无数据</view>
		</view>
		<!-- 底部导航 -->
		<custom-tabbar :activeIndex="current" :isHint="isTip" />
	</view>
	<up-modal title="提示" :show="showModal" contentTextAlign="center" confirmButtonShape="circle">
		<view class="slot_content">是否确认接单？</view>
		<template #confirmButton>
			<view class="modalBut dis">
				<view class="custom_btn nodeBut" @click="okDel">取消</view>
				<view class="custom_btn" @click="okAdd">确定</view>
			</view>
		</template>
	</up-modal>
</template>

<script setup>
import { getMessageTip, getErrandsList, receivingOrder, statisticsWebsitePVandUV } from '@/config/api.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
import { errandsItem } from '@/util/util.js';
import CustomTabbar from '@/components/custom-tabbar.vue';
const current = ref(1);
const schoolInfo = ref({});
onShow(() => {
	console.log('onShow');
	current.value = 1;
	const schoolStr = uni.getStorageSync('schoolInfo');
	if (!schoolStr) {
		uni.navigateTo({
			url: '/pages/selectSchool/index?isIndex=1'
		});
	} else {
		const school = JSON.parse(schoolStr);
		schoolInfo.value = school;
		uni.setNavigationBarTitle({
			title: school.schoolName + '校话'
		});
	}
	infoFun();
	getMessageTipFun();
	statisticsWebsitePVandUV();
});

// 弹窗
const showModal = ref(false);
const value = ref(0);
const okDel = () => {
	value.value = 0;
	showModal.value = false;
};
const okAdd = async () => {
	const res = await receivingOrder(value.value);
	// console.log(res);
	if (res.code == 0) {
		tabId.value = 3;
		okDel();
		infoFun();
	}
	uni.showToast({
		title: res.message,
		icon: 'none'
	});
};
const open = (val) => {
	showModal.value = true;
	value.value = val;
};

// 获取列表
const list = ref([]);
const pageNum = ref(1);
const pageSize = ref(20);
const total = ref(0);
const isAdmin = ref(0);
const infoFun = () => {
	pageNum.value = 1;
	total.value = 0;
	list.value = [];
	getList();
};
const getList = async () => {
	const type = tabId.value == 0 ? 'latest' : tabId.value == 1 ? 'unaccepted' : tabId.value == 2 ? 'iposted' : 'ihelped';
	const data = {
		pageNum: pageNum.value,
		pageSize: pageSize.value,
		departmentId: schoolInfo.value.schoolId,
		orderType: type
	};
	const res = await getErrandsList(data);

	console.log(res);
	if (res.code == 0) {
		const newList = res.data.pageInfo.list.map((item) => {
			const itemNew = errandsItem(item);
			return itemNew;
		});
		isAdmin.value = res.data.isAdmin;
		total.value = res.data.pageInfo.total;
		list.value = [...list.value, ...newList];
	} else {
		uni.showToast({
			title: res.message,
			icon: 'none'
		});
	}
};
onReachBottom(() => {
	if (list.value.length >= total.value) {
		console.log('没有更多内容了');
	} else {
		pageNum.value++;
		getList(orderType.value);
	}
});

// 订单详情
const goDetails = (item) => {
	uni.navigateTo({
		url: `/errand/errand/errandDetails?id=${item.id}`
	});
};
// tab切换
const tabId = ref(0);
const changeTab = (num) => {
	tabId.value = num;
	infoFun();
};
// 查询是否有消息未读
const isTip = ref(0);
const getMessageTipFun = async () => {
	const res = await getMessageTip();
	if (res.code == 0) {
		isTip.value = res.data.unreadCount;
	}
};
const goSchool = () => {
	uni.redirectTo({
		url: '/pages/selectSchool/index'
	});
};
</script>

<style lang="scss" scoped>
.errand {
	padding-bottom: 120rpx;
	width: 100%;
	.title {
		width: 750rpx;
		height: 276rpx;
		background: linear-gradient(180deg, #8dadfa 0%, rgba(169, 175, 248, 0) 100%);
		.titL {
			flex: 1;
			padding-left: 40rpx;
			.titLT {
				font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
				font-weight: 400;
				font-size: 48rpx;
				color: #000;
			}
			.titLL {
				margin-top: 45rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #222222;
				.titItem {
					margin-right: 20rpx;
				}
			}
		}
		.titR {
			padding-right: 92rpx;
			// width: 184rpx;
			height: 100%;
			.titImg {
				width: 184rpx;
				height: 201rpx;
			}
		}
	}
	.errandCon {
		.tab {
			justify-content: space-around;
			align-items: center;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 26rpx;
			background-color: #f4f5fb;
			.tabItem {
				// width: 120rpx;
				text-align: center;
				color: #656565;
			}
			.avtive {
				position: relative;
				color: #000;
				font-weight: 700;
				font-size: 30rpx;
			}
			.avtive::after {
				position: absolute;
				bottom: 0;
				left: 50%;
				display: block;
				content: '';
				width: 45rpx;
				height: 8rpx;
				border-radius: 8rpx;
				background: #4f77e0;
				transform: translateX(-60%);
			}
		}
		.list {
			.item {
				position: relative;
				.itemTop {
					justify-content: space-between;
					align-items: center;
					border-bottom: 2rpx solid #f4f4f4;
					.topL {
						align-items: center;
						.tab0 {
							padding: 5rpx 15rpx;
							font-size: 24rpx;
							border-radius: 8rpx;
						}
						.tab1 {
							color: #4f77e0;
							background: #eef3ff;
						}
						.tab2 {
							background: #ffefed;
							color: #e0604f;
						}
						.tab3 {
							color: #00cc36;
							background: #e0f7e2;
						}
						.tab4 {
							color: #f39f4b;
							background: #fff6ed;
						}
						.money {
							margin-left: 15rpx;
							font-weight: bold;
							font-size: 20rpx;
							color: #e65e1f;
						}
					}
					.topR {
						.state {
							font-weight: bold;
							font-size: 24rpx;
						}
						.state0 {
							color: #1b9aee;
						}
						.state1 {
							color: #f3742f;
						}
						.state2 {
							color: #75c550;
						}
						.state3 {
							color: #fdb321;
						}
						.state4 {
							color: #a8a8a8;
						}
					}
				}
				.itemCon {
					.itemTIT {
						font-weight: bold;
						font-size: 28rpx;
						color: #000000;
					}
					.conI {
						margin-top: 20rpx;
						.lable {
							font-weight: 500;
							font-size: 24rpx;
							color: #999999;
						}
						.value {
							align-items: center;
							font-weight: 500;
							font-size: 24rpx;
							color: #222222;
							.userImg {
								margin-right: 15rpx;
								width: 40rpx;
								height: 40rpx;
								border-radius: 50%;
								background: #ccc;
								overflow: hidden;
							}
						}
					}
				}
				.bottomBut {
					position: absolute;
					right: 20rpx;
					bottom: 30rpx;
					padding: 18rpx 30rpx;
					background: linear-gradient(44deg, #5384f7 0%, #5744e8 100%);
					box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(78, 125, 239, 0.4);
					border-radius: 16rpx;
					font-size: 24rpx;
					color: #ffffff;
				}
			}
		}
	}
}
.slot_content {
	width: 100%;
	text-align: center;
}
.modalBut {
	align-items: center;
	justify-content: space-around;
	width: 100%;
	.custom_btn {
		width: 40%;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
		text-align: center;
		color: #fff;
		background-color: #3391e6;
	}
	.nodeBut {
		color: #515151;
		background-color: #f0f0f0;
	}
}
</style>
<style>
page {
	background-color: #f5f6fb;
}
image {
	width: 100%;
	height: 100%;
}
.modalBut {
	align-items: center;
	justify-content: space-around;
	width: 100%;
}
.custom_btn {
	width: 40%;
	height: 70rpx;
	line-height: 70rpx;
	border-radius: 35rpx;
	text-align: center;
	color: #fff;
	background-color: #3391e6;
}
.nodeBut {
	color: #515151;
	background-color: #f0f0f0;
}

.card {
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
}
.noData {
	width: 100%;
	color: #999;
	text-align: center;
}
</style>
